<template>
    <div>
        <ContentHead title="项目详情" content="这里可以查看或编辑项目的数据库、API、插件等信息" ref="contentHead" @showScrollChange="showScrollChange"></ContentHead>
        <div style="background: #fff;width: 100%;display: flex;position: relative" v-if="appInfo">
            <Layout>
                <Sider ref="side1" hide-trigger collapsible :collapsed-width="78" v-model="collapsed" width="200" :class="menuClass">
                    <div :class="'app-title ' + (collapsed?'collapsed-title':'')">
                        <Avatar style="background-color: #e2e2e2; color: #515a6e" v-cloak>{{appInfo.appName.substring(0, 1)}}</Avatar>
                        <div class="app-name" v-cloak>{{appInfo.appName}}</div>
                    </div>
                    <Menu width="auto" :active-name="activeName" :class="menuitemClasses" @on-select="selectMenu">
                        <MenuItem :name="k" v-for="(v, k) in menuList" :key="k">
                            <i :class="v.ico"></i>
                            <span>{{v.name}}</span>
                        </MenuItem>
                    </Menu>
                </Sider>
                <Layout class="detail-content">
                    <Content style="background: #fff;padding: 16px">
                        <div style="width: 1024px; margin: 0 auto">
                            <Breadcrumb style="border-bottom: 1px solid #dcdee2; padding-bottom: 16px;">
                                <BreadcrumbItem to="/project">项目列表</BreadcrumbItem>
                                <BreadcrumbItem :to="$route.path">{{appInfo.appName}}</BreadcrumbItem>
                                <BreadcrumbItem>{{menuList[activeName].name}}</BreadcrumbItem>
                            </Breadcrumb>
                            <router-view></router-view>
                        </div>
                    </Content>
                </Layout>
            </Layout>
        </div>
    </div>
</template>

<script>
    export default {
        data(){
          return {
              id: this.$route.params.id,
              appInfo: null,
              menuList: {
                  info: {
                      name: '应用',
                      ico: 'fas fa-desktop'
                  },
                  server:{
                      name: '服务器',
                      ico: 'fas fa-server'
                  },
                  images:{
                      name: '发布',
                      ico: 'fas fa-upload'
                  },
                  plugins:{
                      name: '插件',
                      ico: 'fas fa-plug'
                  }
              },
              showScroll: false
          }
        },
        computed: {
            menuitemClasses () {
                return [
                    'menu-item',
                    this.collapsed ? 'collapsed-menu' : ''
                ]
            },
            menuClass () {
                return [
                    'app-menu',
                    this.showScroll? 'menu-fixed' : ''
                ]
            }
        },
        created() {
            this.activeName = this.$route.name;
            this.$axios.get('/mdo/api/v1/appInfo/' + this.id).then(res => {
                this.appInfo = res.data;
                if (this.appInfo.appType === '0') {
                    this.$set(this.menuList, 'db', {
                        name: '数据库',
                        ico: 'fas fa-database'
                    });
                    this.$set(this.menuList, 'api', {
                        name: '接口',
                        ico: 'fas fa-link'
                    });
                }
            });
        },
        methods:{
            showScrollChange(showScroll){
                this.showScroll = showScroll;
            },
            selectMenu(name){
                this.activeName = name;
                this.$router.push({name: name, params:{id : this.id}});
            }
        }
    }
</script>
<style lang="less" scoped>
    .app-title{
        font-weight: bold;
        padding: 16px 0 16px 24px;
        font-size: 14px;
        display: flex;
        align-items: center;

        .app-name{
            margin-left: 8px;
            display: inline-block;
        }
    }

    .app-menu{
        background-color: #fff;
        border-right: 1px solid @border-color-base;
        position: absolute;
        bottom: 0;
        min-height: calc(~"100vh - 165px");
        top: 0;
        transition-property: top;
        transition-duration: 0ms;
        &.menu-fixed{
            position: fixed;
            top: 71px;
        }
    }

    .collapsed-title{
        .app-name{
            display: none;
        }
    }

    .menu-item span{
        display: inline-block;
        overflow: hidden;
        width: 69px;
        text-overflow: ellipsis;
        white-space: nowrap;
        vertical-align: middle;
        transition: width .2s ease .2s;
    }
    .menu-item i{
        transform: translateX(0px);
        transition: font-size .2s ease, transform .2s ease;
        vertical-align: middle;
        font-size: 16px;
    }
    .collapsed-menu span{
        display: none;
    }
    .collapsed-menu i{
        transform: translateX(5px);
        transition: font-size .2s ease .2s, transform .2s ease .2s;
        vertical-align: middle;
        font-size: 22px;
    }

    .app-content{
        padding: 16px;
    }
</style>
<style lang="less">
    .app-menu {
        .ivu-menu:after{
            display: none;
        }
    }

    .detail-content{
        .ivu-tabs-nav-container{
            line-height: 2.5;
        }
    }
</style>